// 堆叠柱状图加折线图 双y轴
(function () {
    var boxColors = ['#1AB370','#FAAD14','#F44336','#0688EE','#69D9A8','#FFCB30','#F85A68','#AB70ED','#028695','#FD94C3']
    var boxColors2 = ["#FD94C3", "#028695", "#AB70ED", "#F85A68", "#FFCB30", "#69D9A8", "#0688EE", "#F44336", "#FAAD14", "#1AB370"]
    console.log(boxColors2, 'boxColors2')
    const colorLeng1 = boxColors.length
    const colorLeng2 = boxColors2.length

    let oEchart = echarts.init(document.getElementById('barLine'));

    const xData = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'l', 'm', 'n', 'q', 'ww', 'r', 't']

    const barS = ['参与病例征集', '未参与病例征集']
    const lineS = ['高活跃', '中活跃', '低活跃']

    const barData = barS.map((item, index) => {
        return {
            name: item,
            type: 'bar',
            stack: 'bar', // total
            itemStyle: {
                color: boxColors[index % colorLeng1]
            },
            data: xData.map((item) => {
                return {
                    name: item,
                    value: Math.round(Math.random() * (500 - 100) + 100)
                }
            })
        }
    })
    const lineData = lineS.map((item, index) => {
        return {
            name: item,
            type: 'line',
            stack: 'line', // total
            stackStrategy: '',
            yAxisIndex: 1, // 指定使用第二个y轴, 指定第二个y轴的刻度使用该分类的数据 
            itemStyle: {
                color: boxColors2[index % colorLeng2]
            },
            data: xData.map((item) => {
                return {
                    name: item,
                    value: Math.round(Math.random() * (200 - 100) + 50)
                }
            })
        }
    })


    // 使用刚指定的配置项和数据显示图表。
    const option = {
        color: boxColors,
        tooltip: {},
        legend: {},
        grid: {
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: xData
        },
        yAxis: [
            {
                type: 'value',
                boundaryGap: ['0%', '2%'] // 下边距，上边距
            },
            {
                type: 'value',
                boundaryGap: ['0%', '2%']
            }
        ],
        series: [
            ...barData,
            ...lineData
        ]
    }
    console.log(option, 'option')
    oEchart.setOption(option);
})()